<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  height: 100vh;
			}
			
			.frosted-bg,
			.glass {
			  background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
			  background-position: center;
			  background-repeat: no-repeat;
			}
			
			.frosted-bg {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  transition: 1s;
			}
			
			.glass {
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  z-index: 1;
			  width: 600px;
			  height: 450px;
			  transform: translate(-50%, -50%);
			  transition: 1s;
			}
			.glass:hover {
			  box-shadow: 0 0.7px 1.7px rgba(0, 0, 0, 0.248), 0 1.7px 4.3px rgba(0, 0, 0, 0.355), 0 3.5px 8.9px rgba(0, 0, 0, 0.445), 0 7.3px 18.3px rgba(0, 0, 0, 0.552), 0 20px 50px rgba(0, 0, 0, 0.8);
			}
			.glass:hover ~ .frosted-bg {
			  filter: blur(10px);
			}
		</style>
	</head>
	<body>
		<div class="glass"></div>
		<div class="frosted-bg"></div>
	</body>
</html>
